<template>
  <div class="container" :style="[customStyle]">
    <el-tree
      :data="obstallist"
      :props="defaultProps"
      :default-checked-keys="obstalkeys"
      show-checkbox
      node-key="obsid"
      ref="obstree"
      :render-after-expand="false"
      @check-change="checkChangeClick"
    >
      <div slot-scope="{ node, data }">
        <i class="el-icon-cloudy" style="margin-right: 5px"></i>
        <span>{{ data.obsid }}</span>

        <i
          v-if="node.checked"
          class="el-icon-s-grid"
          style="right: 5px; position: absolute"
          @click="showGrid(node)"
        ></i>
        <i
          v-if="node.checked"
          class="el-icon-location-outline"
          style="right: 45px; position: absolute"
          @click="location(data)"
        ></i>
        <i
          class="el-icon-delete"
          style="right: 25px; position: absolute"
          @click="delobstal(data)"
        ></i>
      </div>
    </el-tree>
  </div>
</template>
  
<script>
import { ObstalsList } from './obstalview'

let ol
export default {
  name: 'ldObstaclelist',
  props: {
    obstaclelistUrl: {
      type: String,
      default: null,
    },
    customStyle: {
      type: [Object, Array],
      default: { background: '#073968a1' },
    },
  },
  data() {
    return {
      drawer: false,
      obstallist: [],
      obstalkeys: [],
      defaultProps: {
        children: 'children',
        label: 'obsid',
      },
    }
  },
  async mounted() {
    if (!ol) {
      ol = new ObstalsList(window.Viewer, this.obstaclelistUrl)
    }
    await ol.fetchObstalRegions()
    this.obstallist = ol.Obstals
    for (const o of this.obstallist) {
      o.gridvis = false
    }
  },
  beforeDestroy() {
    if (!ol) return
    for (const os of this.obstallist) {
      ol.ViewRegion(os.obsid, false)
      ol.ViewGrid(os.obsid, false)
    }
  },
  methods: {
    checkChangeClick(node, isCheck, data) {
      if (node.children) {
        return
      }
      this.nodeCheckEnt(node, isCheck)
    },
    nodeCheckEnt(node, isCheck) {
      if (!ol) return

      ol.ViewRegion(node.obsid, isCheck)
      if (!isCheck) {
        ol.ViewGrid(node.obsid, false)
      }
    },
    async showGrid(node) {
      if (!ol) return
      node.data.gridvis = !node.data.gridvis
      ol.ViewGrid(node.data.obsid, node.data.gridvis)
      ol.ViewRegion(node.data.obsid, !node.data.gridvis)
    },
    location(data) {
      let poss = this.getcoords(data, Cesium)
      let bound = Cesium.BoundingSphere.fromPoints(poss.positions)
      let height = bound.radius * 6 + poss.height
      var offset = new Cesium.HeadingPitchRange(0.0, -1.0, height)
      window.Viewer.camera.flyToBoundingSphere(bound, {
        offset: offset,
        duration: 2.0,
      })
    },
    delobstal(data) {
      const self = this
      this.$confirm('确定删除该区域', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then((_) => {
          // confirm delte obstal region
          ol.delteRegion(data.obsid)
            .then((r) => {
              this.$message({ type: 'success', message: '删除成功' })
              for (const os of self.obstallist) {
                ol.ViewRegion(os.obsid, false)
                ol.ViewGrid(os.obsid, false)
              }
              ol.fetchObstalRegions().then((_) => {
                self.obstallist = ol.Obstals
                for (const o of self.obstallist) {
                  o.gridvis = false
                }
              })
            })
            .catch((e) => {
              this.$message({ type: 'info', message: e })
            })
        })
        .catch((_) => {
          // cancel nop
        })
    },
    //处理坐标数据
    getcoords(d, cesium) {
      let position = [],
        coordsArr = [],
        positions = [],
        heightMax = null
      for (let i = 0; i < d.region.length; i++) {
        const geometry = d.region[i]
        heightMax = Math.max(...geometry.heights)
        for (let j = 0; j < geometry.coords.length; j++) {
          const coords = geometry.coords[j]
          position.push(coords)
        }
      }
      for (let i = 0; i < position.length - 1; i += 2) {
        coordsArr.push([position[i], position[i + 1]])
      }
      coordsArr.forEach((e) => {
        let p = cesium.Cartesian3.fromDegrees(e[0], e[1], 0)
        positions.push(p)
      })
      return { positions: positions, height: heightMax }
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  width: 215px;
  height: 400px;
  top: 10px;
  left: 10px;
  padding: 5px;
  border: solid #0e60af 2px;
  border-radius: 10px;
  z-index: 9;
  overflow: auto;
}

.container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::v-deep .el-drawer__wrapper {
  position: absolute !important;
  width: 220px !important;
  height: 360px !important;
  bottom: 110px !important;
  left: 20px !important;
  top: auto;
}

::v-deep .el-drawer {
  width: 100% !important;
  height: 100% !important;
  background: #073968a1 !important;
  border: solid #0e60af 2px !important;
  border-radius: 10px !important;
}

.el-tree {
  position: relative;
  max-height: 400px;
  cursor: default;
  background: #ffffff00;
  color: #fff;
}
::v-deep .el-tree-node__content:hover {
  background-color: rgba(55, 107, 159, 0.6);
}
::v-deep .el-upload-list__item:hover {
  background-color: rgba(55, 107, 159, 0.6);
}

::v-deep .el-tree-node:focus {
  background-color: rgba(55, 107, 159, 0.6);
}
::v-deep .el-tree-node__content:focus {
  background-color: rgba(55, 107, 159, 0.6);
}

::v-deep .is-current > .el-tree-node__content {
  background: #263445 !important;
}
</style>